<template>
  <!--  -->
  <div class="grid">
    <div class="grid-item" v-for="(item, index) in list" :key="index">
      <img :src="item.img" alt="" />
      <div>{{item.title}}</div>
    </div>
  </div>
</template>

  
<script>
// import Masonry from "masonry-layout";
export default {
  data() {
    return {
      masonry:null,
      list: [
        {
          img: "https://image.watsons.com.cn//upload/8a316140.png?w=377&h=451&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "最近浴室新宠，日系神仙好物了解一下～",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/5c3e51e4.jpg?w=720&h=960&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "真的是万能.超级实用.包包必备单品! ! !",
          user: "迷人的小妖精迷人的小妖精",
          like: "952",
        },
        {
          img: "https://image.watsons.com.cn//upload/bef41e67.JPG?w=712&h=534&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "150元搞定全套护肤品，这些护肤好物必须交出来！",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/13afe9a7.jpg?x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "夏天用这款姨妈巾，让你体验真正的清爽",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/642cb83c.jpeg?w=1080&h=1080&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title:
            "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/98c7c4c3.jpg?w=1210&h=1210&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title:
            "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/25ab20fe.JPG?w=1000&h=1200&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "夏天用这款姨妈巾，让你体验真正的清爽",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/083767f0.JPG?w=828&h=620&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "150元搞定全套护肤品，这些护肤好物必须交出来！",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
      ],
    };
  },
  mounted(){
    var grid = document.querySelector(".grid");
    this.masonry = new Masonry(grid, {
      // options...
      itemSelector: ".grid-item",
    //   columnWidth: 200,
    //   gutter: 10,
      fitWidth: true
    });
    window.addEventListener('resize', this.reload)
  },
  methods:{
    reload(){
        console.log('this.masonry:',this.masonry)
        this.masonry.reloadItems()
        this.masonry.layout()
    }
  },
  beforeDestroy(){
    // 销毁瀑布流
    // this.masonry.destroy();
  }
//   updated() {
//     var grid = document.querySelector(".grid");
//     var msnry = new Masonry(grid, {
//       // options...
//       itemSelector: ".grid-item",
//       columnWidth: 300,
//     });
//   },
};
</script>

<style lang="scss" scoped>
.grid{
    width: 100%;
}
.grid-item{
    width: 20%;
    margin-bottom: 10px;

    img{
        max-width: 100%;
    }
}
</style>